<template>
    <!-- 页面容器 -->
    <div class="page-container">
        <!-- 卡片 -->
        <el-card>
            <!-- 卡片头部 -->
            <div slot="header" class="clearfix">
                <span>公告详情</span>
            </div>
            <h1 class="text-center">{{ notice.title }}</h1>
            <div class="text-gray text-center">{{ notice.createTime }}</div>
            <div class="content">
                {{ notice.content }}
            </div>
        </el-card>
    </div>
</template>

<script>
import { getNoticeByIdAPI } from '@/api/notice'
export default {
    name: 'FrontNoticeDetails',

    data() {
        return {
            notice: {}
        };
    },

    async mounted() {
        // 获取公告详情数据
        const {data:notice} = await getNoticeByIdAPI(this.$route.params.id)
        this.notice = notice
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
@deep-bg: linear-gradient(135deg, #232946 0%, #393e46 100%);
@gold: #ffd700;
@main-blue: #409EFF;
@light-gray: #bbb;

.page-container {
    width: 1200px;
    margin: 20px auto;
    .content{
        padding: 10px;
        line-height: 1.5;
    }
}

.notice-content, .notice-date {
    color: @light-gray !important;
}

.text-bold, .font-bold, .bold {
    color: #bbb !important;
    font-weight: bold;
}

.el-card, .el-dialog, .el-card__body {
    background: #232946 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
    border: 1.5px solid #ffd700 !important;
    color: #fff !important;
}
.el-dialog__header, .el-dialog__footer {
    background: #232946 !important;
    border: none !important;
}
</style>